<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img class="banner-img" src="//img1.qunarzz.com/sight/p0/1710/7f/7f06f56b02987c66a3.img.jpg_600x330_029cf445.jpg" alt="">
            <router-link to="/">
                <div class="iconfont banner-back">&#xe602;</div>
            </router-link>
            <div class="banner-info">
                <div class="banner-tittle">库木塔格沙漠景区</div>
                <div class="banner-number"><span class="iconfont search-icon banner-icon">&#xe603;</span>8</div>
            </div>
        </div>
        <fade-animation>
            <common-gallary :imgs="imgs" v-show="showGallary" @close="showGallaryClose"></common-gallary>
        </fade-animation>
    </div>
</template>

<script>
import CommonGallary from '@/components/gallary/Gallary'
import FadeAnimation from '@/components/fade/FadeAnimation'
    export default {
        name:"DetailBanner",
        data (){
            return{
                showGallary:false,
                imgs: [
                    "http://img1.qunarzz.com/sight/p0/1710/7f/7f06f56b02987c66a3.img.jpg_r_800x800_eb8da27f.jpg",
                    "http://img1.qunarzz.com/sight/p0/1710/cf/cf3f9a8142b7a416a3.img.jpg_r_800x800_257be6a4.jpg",
                    "http://img1.qunarzz.com/sight/p0/1710/7f/7f06f56b02987c66a3.img.jpg_r_800x800_eb8da27f.jpg"
                ]
            }
        },
        methods:{
            handleBannerClick(){
                this.showGallary = true
            },
            showGallaryClose(){
                this.showGallary = false
            }
        },
        components: {
            CommonGallary,
            FadeAnimation
        }
    }
</script>

<style lang="stylus" scoped>
.banner
    position relative
    overflow hidden
    height 0
    padding-bottom 55%
    .banner-img
        width 100%
    .banner-back
        position absolute
        top 0.2rem
        left 0.2rem  
        line-height 0.5rem
        font-size:0.5rem 
        padding: 0.1rem
        border-radius:50%
        background-color: #000;
        opacity: .5;
        color:#fff
    .banner-info
        display flex
        position absolute 
        left 0
        right 0
        bottom 0.3rem
        line-height 0.6rem
        padding: 0 0.3rem;
        .banner-tittle
            flex:1
            line-height 0.4rem
            color #fff
            font-size: 0.32rem
        .banner-number
            padding 0 0.4rem
            height 0.4rem
            line-height 0.4rem
            border-radius: 0.2rem
            background-color #000
            color #fff  
            .banner-icon
                vertical-align: top    
</style>


